<template>
	 <view class="page">
		 <view class="">{{order_detail.guider_mobile}}</view>
		 <view class="">{{order_detail}}</view>
		 <view class="img-box-canvas" v-if="!showCanvas">
			 <image lazy-load="true"  :src="savedFilePath"  mode="widthFix" width="100%"></image>
		 </view>
		 <view class="btn-box" @click="goReceipt">长按上方图片，保存凭证图片</view>
		 <!-- <view class="" style="width: 750upx;height: 100upx;"></view> -->
	     <canvas v-if="showCanvas" style="opacity: 0;position: relative;width: 700px; height: 1120px;z-index: 9;" canvas-id="firstCanvas"></canvas>
	  </view>
</template>
 
<script>
export default {
	data() {
		return {
			canvas_tit:'',
			canvas_msg:'',
			text_top:0,
			come:'',
			canvas_mak:'',
			canvas_money:'',
			img_header:'',
			img_qrcode:'',
			img_goods:'',
			error:'',
			savedFilePath:'',
			showCanvas:true,
			qrcode_url:'',
			base_avatar:'',
			qrcode_url_new:'',
			base_nickname:'',
			num:2,
			order_detail:{}
		};
	},
	onLoad(e) {
		var self = this;		
		this.$request.request({
			url:'/order/offline/receipt',
			data:{
				order_id:e.id
			},
			success:function(res){
				if(res.code==200){
					let x = res.result;
					x.real_payments = self.$money(x.real_payments)
					console.log( self.$digitUppercase(x.real_payments))
					self.order_detail = x
					self.drawCanvas()
				}
			}
		})
		
	},
	methods: {
//这是一个封装好的方法 
        promisify: api => {
            return (options, ...params) => {
                return new Promise((resolve, reject) => {
                    const extras = {
                        success: resolve,
                        fail: reject
                    }
                    api({ ...options, ...extras }, ...params)
                })
            }
        },
		drawCanvas(){
			uni.showLoading({
			    title: '加载中'
			});
			var self = this;
			const ctx = uni.createCanvasContext('firstCanvas');
			ctx.save();		
			ctx.beginPath();
			// only fill this rect, not in current path
			ctx.setFillStyle('#FFFFFF')
			ctx.fillRect(0, 0, 10000, 10000)
			
			// ctx.rect(0, 0, 10000, 10000)
			
			ctx.fill()
			ctx.closePath();
			ctx.save();
			
			ctx.beginPath();
			ctx.drawImage('../../static/images/logo.png', self.num*15, self.num*15, self.num*50, self.num*50)

			ctx.closePath();
			ctx.save();
			
			
			ctx.beginPath();
			// 作者名称
			ctx.setTextAlign('left')    // 文字居中
			ctx.setFillStyle('#000000')  // 文字颜色：黑色
			ctx.setFontSize(self.num*12)         // 文字字号：22px
			ctx.fillText('领得智家', self.num*15, self.num*80);
			
		
			ctx.setTextAlign('left')    // 文字居中
			ctx.setFillStyle('#000000')  // 文字颜色：黑色
			ctx.setFontSize(self.num*16)  
			ctx.fillText('代收款电子收据', self.num*120, self.num*40);
			
			
			ctx.setFontSize(self.num*12) 
			ctx.fillText('收据号码：'+self.order_detail.receipt_number, self.num*190, self.num*70);
			ctx.fillText('开据时间：'+self.order_detail.billing_date, self.num*190, self.num*90);
			ctx.setFontSize(self.num*14)
			ctx.fillText('交易信息', self.num*15, self.num*120);
			
			
			ctx.closePath();
			ctx.save();
			
			

			ctx.beginPath();
			ctx.fillStyle = "#f7f7f7";
			ctx.fillRect(0 ,self.num*130,self.num*350,self.num*110);
			ctx.closePath();
			
			
			ctx.beginPath();
			// 作者名称
			ctx.setTextAlign('left')    // 文字居中
			ctx.setFillStyle('#000000')  // 文字颜色：黑色
			ctx.setFontSize(self.num*13)         // 文字字号：22px
			ctx.fillText('订单号：', self.num*15, self.num*150);
			ctx.fillText(self.order_detail.order_no, self.num*120, self.num*150);
			ctx.fillText('导购手机号：', self.num*15, self.num*175);
			ctx.fillText(self.order_detail.guider_mobile, self.num*120, self.num*175);
			ctx.fillText('顾客手机号：', self.num*15, self.num*200);
			ctx.fillText(self.order_detail.consumer_mobile, self.num*120, self.num*200);
			ctx.fillText('交易类型：', self.num*15, self.num*225);
			ctx.fillText(self.order_detail.transaction_type, self.num*120, self.num*225);
			ctx.fillText('支付信息', self.num*15, self.num*260);
			ctx.closePath();
			ctx.save();
			
			ctx.beginPath();
			ctx.fillStyle = "#f7f7f7";
			ctx.fillRect(0 ,self.num*270,self.num*350,self.num*110);
			ctx.closePath();
			
			ctx.beginPath();
			ctx.setTextAlign('left')    // 文字居中
			ctx.setFillStyle('#000000')  // 文字颜色：黑色
			ctx.setFontSize(self.num*13)         // 文字字号：22px
			ctx.fillText('支付金额（元）：', self.num*15, self.num*290);
			ctx.fillText('¥'+self.order_detail.real_payments, self.num*120, self.num*290);
			ctx.fillText('金额大写：', self.num*15, self.num*315);
			ctx.fillText(self.$digitUppercase(self.order_detail.real_payments), self.num*120, self.num*315);
			ctx.fillText('支付方式：', self.num*15, self.num*340);
			ctx.fillText(self.order_detail.pay_category, self.num*120,self.num* 340);
			ctx.fillText('支付时间：', self.num*15, self.num*365);
			ctx.fillText(self.order_detail.pay_time, self.num*120, self.num*365);
			ctx.fillText('企业信息', self.num*15, self.num*400);
			ctx.closePath();
			ctx.save();
			
			ctx.beginPath();
			ctx.fillStyle = "#f7f7f7";
			ctx.fillRect(0 ,self.num*410,self.num*350,self.num*80);
			ctx.closePath();
			
			ctx.beginPath();
			ctx.setTextAlign('left')    // 文字居中
			ctx.setFillStyle('#000000')  // 文字颜色：黑色
			ctx.setFontSize(self.num*13)         // 文字字号：22px
			ctx.fillText('企业名称', self.num*15, self.num*430);
			ctx.fillText('成都领得科技有限公司', self.num*120, self.num*430);
			ctx.fillText('企业地址：', self.num*15, self.num*455);
			ctx.fillText('四川省成都市双流区西航港街道', self.num*120, self.num*455);
			ctx.fillText('双华路三段788号美利亨材料城7栋43号', self.num*120, self.num*475);
			ctx.closePath();
			ctx.save();
			
			ctx.beginPath();
			ctx.drawImage('../../static/images/zhang.png', self.num*250,self.num* 400,self.num* 95,self.num* 82)
			ctx.closePath();
			ctx.save();
			
			// 绘图生成临时图片
			ctx.draw(false,() => {
				uni.showLoading({
				    title: '加载中'
				});
			   setTimeout(function() {
				   uni.canvasToTempFilePath({
				   	canvasId:'firstCanvas',
				   	success: function(res){
				   		self.savedFilePath = res.tempFilePath;//相对路径
						self.showCanvas = false;
						uni.hideLoading();
				   	}
				   }) 
			   }, 1000);   
			})	
		},
		saveImage(){
			var self = this;
			uni.showLoading({
			    title: '图片保存中'
			});
			uni.saveImageToPhotosAlbum({
				filePath:self.savedFilePath,
				success : function(res){
				uni.showToast({title : '图片已保存'})
				}
			})
		},
		goReceipt(){
			uni.showToast({
				title:'请长按上方图片保存图片~',
				icon:"none",
				duration:3000
			});
		}
	}
};
</script>
 
<style scoped>
	.save-box{
		position: fixed;
		width: 750upx;
		height: 100upx;
		border-top: 1px solid #cccccc;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #FFFFFF;
		z-index: 9999;
	}
	.save-msg{
		font-size: 12px;
		color: #661f1f;
		margin-left: 40upx;
		/* margin-top: 20upx; */
	}
	.save-img{
		width: 204upx;
		height: 68upx;
		margin-right: 40upx;
		margin-top: 20upx;
	}
	.img-box-canvas{
		text-align: center;
		padding-top: 20upx;
	}
	.btn-box{
		position: fixed;
		width: 100%;
		height: 80upx;
		left: 0;
		bottom: 0;
		color: #FFFFFF;
		background-color: #859dc2;
		text-align: center;
		line-height: 80upx;
		font-size: 14px;
	}
</style>